import React, { memo } from 'react';
// import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import messages from './messages';
import { imgBaseUrl } from '../../global-urls';
import Nodes from './nodes';
import { Col, Row, Carousel } from 'antd';

function RainbowSwiper() {
  const data = [
    {
      mainTitle: '纸上的彩虹',
      subTitle: 'Rainbow In Paper',
      img: 'home.webp',
    },
    {
      mainTitle: '用素描画的钟',
      subTitle: 'Rainbow In Paper',
      img: 'swiper01.JPG',
    },
    {
      mainTitle: '斯人若彩虹',
      subTitle: 'Rainbow In Paper',
      img: 'swiper02.JPG',
    },
    {
      mainTitle: '遇上方知有',
      subTitle: 'Rainbow In Paper',
      img: 'swiper03.JPG',
    },
  ];
  return (
    <Nodes.Swiper data-scroll data-scroll-direction="vertical" data-scroll-speed="-1">
      <Carousel
        autoplay
        dots={false}
        effect="fade"
        infinite
        data-scroll
        data-scroll-direction="vertical"
        data-scroll-speed="-4"
      >
        {data.length &&
          data.map(item => (
            <Nodes.SwiperCard key={item.mainTitle}>
              <Nodes.SwiperCardText
                data-scroll
                data-scroll-direction="vertical"
                data-scroll-speed="-1"
              >
                <Row>
                  <Col span={4} />
                  <Col span={16}>
                    <Nodes.BannerTitle>{item.mainTitle}</Nodes.BannerTitle>
                    <Nodes.BannerSubTitle>{item.subTitle}</Nodes.BannerSubTitle>
                  </Col>
                  <Col span={4} />
                </Row>
              </Nodes.SwiperCardText>
              <Nodes.BannerImg src={`${imgBaseUrl}${item.img}`} alt="" />
            </Nodes.SwiperCard>
          ))}
      </Carousel>
    </Nodes.Swiper>
  );
}

RainbowSwiper.defaultProps = {};

RainbowSwiper.propTypes = {};

export default memo(RainbowSwiper);
